<template>
  <view class="attendance-page">
    <view class="header">
      <view class="title">考勤签到</view>
      <view class="subtitle">今日待签到任务</view>
    </view>
    
    <view class="attendance-list">
      <view 
        v-for="lesson in filteredLessons" 
        :key="lesson.lessonId" 
        class="attendance-card"
        @click="gotoDetail(lesson)"
      >
        <view class="card-left">
          <view class="sign-type-badge" :class="{'location': lesson.signType === 1, 'face': lesson.signType === 2}">
            <text>{{ lesson.signType === 1 ? '定位' : '人脸' }}</text>
          </view>
        </view>
        <view class="card-content">
          <view class="card-title">{{ lesson.lessonName }}</view>
          <view class="card-time">
            <image src="../../static/imges/time.png" class="time-icon"></image>
            <text>{{ lesson.signStartTime }} - {{ lesson.signEndTime }}</text>
          </view>
        </view>
        <view class="card-right">
          <view class="arrow-right">
            <image src="../../static/imges/arrow-right.png" class="arrow-icon"></image>
          </view>
        </view>
      </view>
      
      <view v-if="filteredLessons.length === 0" class="empty-state">
        <image src="../../static/imges/empty.png" class="empty-icon"></image>
        <text>暂无签到任务</text>
      </view>
    </view>
  </view>
</template>

<script>
	import request from '@/utils/request.js'
export default {
  data() {
    return {
      lessons: []
    }
  },
  computed: {
    filteredLessons() {
      // 获取当前日期（不包含时间）
      const today = new Date();
      today.setHours(0, 0, 0, 0);
      
      return this.lessons.filter(lesson => {
        // 从课程的签到开始时间中提取日期
        const lessonDate = this.extractDateFromTime(lesson.signStartTime);
        
        // 只保留当天和未来的课程
        return lessonDate >= today;
      });
    }
  },
  created(){
	  let token = uni.getStorageSync('token');
	  console.log(`token:`,token);
  	if(token == undefined || token == null || token == ''){
  		uni.redirectTo({
  			url:'/pages/login_or_register/login_or_register',
			fail: (err) => {
				console.log(err);
			}
  		})
  	}
  },
  mounted() {
    this.loadData();
  },
  methods: {
    loadData() {
		request.post('/lesson/list')
		.then(res=>{
			this.lessons = res.data;
			console.log('获取到的课程列表:', this.lessons);
		})
		.catch(err => {
			console.error('获取课程列表失败:', err);
			uni.showToast({
				title: '获取课程列表失败',
				icon: 'none'
			});
		});
    },
    extractDateFromTime(timeString) {
      try {
        // 假设时间格式为 "YYYY-MM-DD HH:mm:ss"
        const datePart = timeString.split(' ')[0];
        const [year, month, day] = datePart.split('-').map(Number);
        
        // 创建日期对象（月份需要减1，因为JavaScript中月份从0开始）
        return new Date(year, month - 1, day);
      } catch (error) {
        console.error('日期解析错误:', error, timeString);
        return new Date(0); // 返回一个过去的日期
      }
    },
    extraText(lesson) {
      if (lesson.signType === 1) {
        return '定位签到';
      } else if (lesson.signType === 2) {
        return '人脸签到';
      } else {
        return '';
      }
    },
    noteText(lesson) {
      return `签到时间：${lesson.signStartTime} - ${lesson.signEndTime}`;
    },
    gotoDetail(item) {
		let url = '';
		if(item.signType == 1){
			url = '/pages/location_sign/location_sign?lessonId='+item.lessonId;
		}else if(item.signType == 2){
			url = '/pages/camera_sign/camera_sign?lessonId='+item.lessonId;
		}
      // 这里可以根据lessonId跳转到相应的课程详情页
	  uni.navigateTo({
	  	url:url,
		fail(){
			console.log(arguments)
		},
	  })
    }
  }
}
</script>

<style>
.attendance-page {
  min-height: 100vh;
  background-color: #f5f7fa;
  padding-bottom: 30rpx;
}

.header {
  background: linear-gradient(to right, #4f99ff, #6ba6ff);
  padding: 40rpx 30rpx 60rpx;
  color: #fff;
  border-bottom-left-radius: 30rpx;
  border-bottom-right-radius: 30rpx;
  box-shadow: 0 4rpx 12rpx rgba(79, 153, 255, 0.2);
}

.title {
  font-size: 40rpx;
  font-weight: bold;
  margin-bottom: 10rpx;
}

.subtitle {
  font-size: 28rpx;
  opacity: 0.9;
}

.attendance-list {
  padding: 20rpx 30rpx;
  margin-top: -30rpx;
}

.attendance-card {
  display: flex;
  background-color: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  position: relative;
  align-items: center;
}

.attendance-card:active {
  background-color: #f9f9f9;
}

.card-left {
  margin-right: 20rpx;
}

.sign-type-badge {
  padding: 10rpx 20rpx;
  border-radius: 8rpx;
  font-size: 24rpx;
  color: white;
  text-align: center;
}

.sign-type-badge.location {
  background-color: #4caf50;
}

.sign-type-badge.face {
  background-color: #ff9800;
}

.card-content {
  flex: 1;
}

.card-title {
  font-size: 32rpx;
  font-weight: 500;
  color: #333;
  margin-bottom: 10rpx;
}

.card-time {
  display: flex;
  align-items: center;
  font-size: 26rpx;
  color: #666;
}

.time-icon {
  width: 28rpx;
  height: 28rpx;
  margin-right: 8rpx;
}

.card-right {
  display: flex;
  align-items: center;
}

.arrow-icon {
  width: 32rpx;
  height: 32rpx;
  opacity: 0.6;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 100rpx 0;
  color: #999;
  font-size: 28rpx;
}

.empty-icon {
  width: 200rpx;
  height: 200rpx;
  margin-bottom: 20rpx;
  opacity: 0.5;
}
</style>
